<template>
	<view class="container">
		<header-view type="home"></header-view>
		<view class="content">
			<view class="hot_list flex">
				<view class="hot_item" v-for="item in list" @tap="toDetail(item)">
					<view class="title el1">{{item.name}}</view>
					<view class="price" :class="item.gain>0?'green':'red'">{{item.price}}</view>
					<view class="status" :class="item.gain>0?'green':'red'">
						<text>{{item.gainvalue}}</text>
						<text>{{item.gain}}%</text>
					</view>
					<view class="detail">
						<view class="detail_item">
							<view class="name">{{$t('上升')}}</view>
							<view class="item up">
								<text>40%</text>
								<view class="item_inner" :style="{width:40+'%'}"></view>
							</view>
							<view class="data">348</view>
						</view>
						<view class="detail_item">
							<view class="name">{{$t('下降')}}</view>
							<view class="item dowm">
								<text>30%</text>
								<view class="item_inner" :style="{width:30+'%'}"></view>
							</view>
							<view class="data">348</view>
						</view>
						<view class="detail_item">
							<view class="name">{{$t('持平')}}</view>
							<view class="item no_change">
								<text>30%</text>
								<view class="item_inner" :style="{width:30+'%'}"></view>
							</view>
							<view class="data">348</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="list_header flex_between">
					<view class="title">
						<image style="width: 50rpx;margin-right: 6rpx;" src="../../static/img/hot.png" mode="widthFix">
						</image><text>{{$t('热门股票')}}</text>
					</view>
					<view class="more flex_center" @tap="toStock">
						<text>{{$t('更多')}}</text><uni-icons type="forward" size="20" color="#6c6c7b"></uni-icons>
					</view>
				</view>

				<!-- <view class="list_header flex_between">
					<view class="title">
						<image style="width: 50rpx;margin-right: 6rpx;" src="../../static/img/hot.png" mode="widthFix">
						</image><text>新闻情报</text>
					</view>
					<view class="more flex_center" @tap="toNoticeList">
						<text>更多</text><uni-icons type="forward" size="20" color="#6c6c7b"></uni-icons>
					</view>
				</view> -->

				<view class="list_content">
					<view class="list_item flex_between" :class="item.gain>0?'green':'red'"
						v-for="(item,index) in hotList" @tap="toDetail(item)">
						<view class="title el1">{{index+1+" "}}{{item.name}}</view>
						<view class="data">{{item.price}}</view>
						<view class="status">
							<view class="status_icon" :class="item.gain>0?'up':'down'">{{item.gainvalue}}</view>
							<view class="status_data">{{item.gain}}%</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tab-view id="1"></tab-view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import tabView from "@/components/tabView/tabView.vue"
	import {
		bannerApi,
		stockListApi
	} from "@/api/api.js"
	export default {
		components: {
			tabView,
			headerView
		},
		data() {
			return {
				list: [],
				hotList: []

			};
		},
		onShow() {
			this.getStockList()
		},
		methods: {
			toDetail(opt) {
				uni.navigateTo({
					url: "/pages/detail/detail?id=" + opt.id
				})
			},
			toStock() {
				uni.switchTab({
					url: "/pages/stock/stock"
				})
			},
			toNoticeList() {
				uni.navigateTo({
					url: "/pages/noticeList/noticeList"
				})
			},
			getStockList() {
				stockListApi({
					type: 1
				}).then(res => {
					console.log(res.data.data.data)
					this.list = res.data.data.data
				})
				stockListApi({
					type: 2
				}).then(res => {
					console.log(res.data.data.data)
					this.hotList = res.data.data.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {

		.content {
			flex: 1;
			width: 100%;

			.hot_list {
				width: 100%;
				overflow: auto;
				margin-top: 46rpx;
				padding-right: 24rpx;

				.hot_item {
					width: 280rpx;
					background: #12132d;
					border-radius: 24rpx;
					margin-left: 24rpx;
					padding: 20rpx;
					color: #dddde7;

					.title {
						font-size: 26rpx;
						font-weight: 400;
					}

					.price {
						font-size: 40rpx;
						font-weight: 700;
						margin-top: 12rpx;
					}

					.status {
						line-height: 44rpx;
						font-size: 20rpx;

						uni-text {
							padding-right: 20rpx;
						}
					}

					.detail {
						.detail_item {
							height: 42rpx;
							display: flex;
							align-items: center;
							font-size: 20rpx;

							.name {
								width: 25%;
							}

							.data {
								width: 28%;
								text-align: end;
							}

							.item {
								flex: 1;
								position: relative;
								text-align: center;
								line-height: 26rpx;
								height: 26rpx;
								border-radius: 8rpx;
								overflow: hidden;
								color: #fff;

								uni-text {
									position: relative;
									z-index: 2;
								}

								.item_inner {
									height: 100%;
									position: absolute;
									left: 0;
									top: 0;
									z-index: 1;
								}
							}

							.up {
								background: #90cf96;

								.item_inner {
									background: #4d9d55;
								}

							}

							.dowm {
								background: #ff947d;

								.item_inner {
									background: #ff5435;
								}

							}

							.no_change {
								background: #6bafeb;

								.item_inner {
									background: #198ef4;
								}
							}
						}
					}
				}
			}

			.list {
				width: 100%;
				padding: 0 24rpx;

				.list_header {
					height: 140rpx;

					.title {
						font-size: 36rpx;
						font-weight: 400;
						color: #fff;
					}

					.more {
						font-size: 24rpx;
						font-weight: 400;
						color: #6c6c7b;
					}
				}

				.list_content {
					padding-bottom: 40rpx;

					.list_item {
						border-bottom: 2rpx solid #151630;
						padding: 20rpx 0;
						font-size: 28rpx;
						height: 168rpx;

						.title {
							width: 40%;
							font-weight: 400;
							color: #c6c6d1;
						}

						.data {
							flex: 1;
							text-align: center;
							font-size: 36rpx;
							font-weight: 600;
						}

						.status {
							font-size: 26rpx;

							.status_icon {
								padding-left: 24rpx;
								position: relative;

								&::before {
									content: "";
									width: 20rpx;
									height: 18rpx;
									position: absolute;
									left: 0;
									transform: translateY(-50%);
								}
							}

							.up::before {
								top: 40%;
								background: #53b15f;
								clip-path: polygon(0 100%, 50% 0, 100% 100%);
							}

							.down::before {
								top: 60%;
								background: #f53e3e;
								clip-path: polygon(0 0, 50% 100%, 100% 0);
							}

							.status_data {}
						}
					}
				}
			}
		}
	}
</style>